<div #container [ngClass]="'devui-toast'" [style.zIndex]="zIndex" [ngStyle]="style" [class]="styleClass">
  <div
    #msgItem
    *ngFor="let msg of value; let i = index"
    class="devui-toast-item-container"
    aria-live="polite"
    [ngClass]="{
      'devui-toast-message-info': msg.severity == 'info',
      'devui-toast-message-warn': msg.severity == 'warn',
      'devui-toast-message-error': msg.severity == 'error',
      'devui-toast-message-success': msg.severity == 'success',
      'devui-toast-message-common': msg.severity == 'common'
    }"
    (mouseenter)="interrupt(i, msgItem)"
    (mouseleave)="removeReset(i, msgItem, msg)"
  >
    <div class="devui-toast-item" [ngSwitch]="msg.severity">
      <div *ngIf="!(!msg.summary && life)" class="devui-toast-icon-close" (click)="removeThrottle(i, msgItem)">
        <svg
          width="16px"
          height="16px"
          viewBox="0 0 14 14"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <defs>
            <polygon
              id="path-1"
              points="8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085 10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425 8.07106781 3.82842712 5.24264069 5.24264069 3.82842712"
            ></polygon>
          </defs>
          <g id="error" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <mask id="mask-2" fill="white">
              <use xlink:href="#path-1"></use>
            </mask>
            <use id="Mask" class="devui-toast-close-icon" xlink:href="#path-1"></use>
          </g>
        </svg>
      </div>
      <span
        class="devui-toast-image"
        [ngClass]="{
          'devui-toast-image-info': msg.severity === 'info',
          'devui-toast-image-warning': msg.severity === 'warn',
          'devui-toast-image-error': msg.severity === 'error',
          'devui-toast-image-success': msg.severity === 'success'
        }"
        *ngIf="msg.severity !== 'common'"
      >
        <ng-container *ngSwitchCase="'info'">
          <svg
            width="16px"
            height="16px"
            viewBox="0 0 16 16"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <g id="info" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <path class="devui-toast-image-info-path" d="M7,13 L7,6 L9,6 L9,13 L7,13 Z M7,5 L7,3 L9,3 L9,5 L7,5 Z" id="info"></path>
            </g>
          </svg>
        </ng-container>
        <ng-container *ngSwitchCase="'warn'">
          <svg
            width="16px"
            height="16px"
            viewBox="0 0 16 16"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <path
                class="devui-icon-warning-outer"
                d="M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"
              ></path>
              <path
                class="devui-icon-warning-inner"
                stroke-width="0.3"
                fill-rule="nonzero"
                d="M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z"
              ></path>
            </g>
          </svg>
        </ng-container>
        <ng-container *ngSwitchCase="'error'">
          <svg
            width="16px"
            height="16px"
            viewBox="0 0 16 16"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <defs>
              <polygon
                id="path-e"
                points="8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085 10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425 8.07106781 3.82842712 5.24264069 5.24264069 3.82842712"
              ></polygon>
            </defs>
            <g id="error" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <mask id="mask-2" fill="white">
                <use xlink:href="#path-e"></use>
              </mask>
              <use id="Mask" class="devui-toast-image-error-path" xlink:href="#path-e"></use>
            </g>
          </svg>
        </ng-container>
        <ng-container *ngSwitchCase="'success'">
          <svg
            width="16px"
            height="16px"
            viewBox="0 0 16 16"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <defs>
              <polygon
                id="path-s"
                points="6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391 6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459"
              ></polygon>
            </defs>
            <g id="correct" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <mask id="mask-2" fill="white">
                <use xlink:href="#path-s"></use>
              </mask>
              <use id="Mask" class="devui-toast-image-success-path" xlink:href="#path-s"></use>
            </g>
          </svg>
        </ng-container>
      </span>
      <div class="devui-toast-message">
        <span *ngIf="!!msg.summary" class="devui-toast-title">{{ msg.summary }}</span>
        <ng-template
          *ngIf="msg.content; else detailTemplate"
          [ngTemplateOutlet]="isTemplate(msg.content) || plainText"
          [ngTemplateOutletContext]="{ msg: msg }"
        ></ng-template>
        <ng-template #plainText>
          <p>{{ msg.content }}</p>
        </ng-template>
        <ng-template #detailTemplate>
          <p *ngIf="msg.detail" [innerHTML]="msg.detail | safe: 'html'"></p>
        </ng-template>
      </div>
    </div>
  </div>
</div>
